Skip to content

Modernize sample app with React 19, Vite, npm and dependency updates#392

Open
jimmyyan9 wants to merge 7 commits intoauth0-samples:masterfrom
jimmyyan9:update-react
Open

Modernize sample app with React 19, Vite, npm and dependency updates#392
jimmyyan9 wants to merge 7 commits intoauth0-samples:masterfrom
jimmyyan9:update-react

Conversation

@jimmyyan9
Copy link
Copy Markdown

This PR modernizes the React sample application by upgrading all major dependencies to their current stable versions and replacing several end-of-life tooling choices. All existing functionality and tests are preserved, with no behavior changes having been introduced.

Changes

SDK and dependency upgrades

  • @auth0/auth0-react: 2.2.02.16.0
  • react / react-dom: 18.2.019.2.4
  • @testing-library/react: upgraded to 16.0 (React 19 compatible)
  • Bootstrap: 4.x5.x (Bootstrap 4 reached EOL January 2023)

Migrated from yarn v1 to npm

  • Removed yarn.lock, generated package-lock.json
  • Updated all documentation and script references to use npm

Migrated from Create React App (react-scripts) to Vite

  • Replaced react-scripts build commands with Vite equivalents
  • Added vite.config.js
  • Renamed applicable files to .jsx
  • Added jest.config.js and babel.config.js to maintain Jest compatibility with the new build tooling

Migrated from reactstrap to react-bootstrap

  • Updated component names and class names to their react-bootstrap / Bootstrap 5 equivalents

Migrated from React Router v5 to v6

  • Removed custom history object (no longer needed in v6)
  • Updated route protection patterns following the auth0-react examples guide

Switched from auth_config.json to environment variables

  • Removed auth_config.json and replaced all reads with environment variables (AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_AUDIENCE)
  • Simplified Netlify, Jest, and Docker configurations (fewer imports and config file dependencies)

Dockerfile

  • Updated to a newer Alpine base image

Motivation

The last commit to this repository was over a year ago, and in that time several of the core dependencies have fallen significantly out of date. Stale samples accumulate vulnerabilities, break against current Node.js versions, and give developers a poor first experience when evaluating Auth0. The primary goals of this PR are to get the sample to a working state against current tooling and ensure it reflects the practices developers are likely already using in their own projects.

React 19 and auth0-react 2.16.0: Keeping the sample current with the latest SDK and framework versions ensures developers can use it as a reference without immediately running into version mismatch issues.

npm over yarn v1: Yarn v1 is in maintenance-only mode with no active development. It requires a separate installation step, whereas npm ships with Node.js, making the project easier to set up out of the box. The current Auth0 React SDK quickstart also uses npm.

Vite over Create React App: react-scripts has not been updated since 2022 and does not support React 19. Vite is the standard for new React projects (Jest is retained for testing with a small configuration addition).

react-bootstrap over reactstrap: reactstrap does not support React 19 and there are no plans to add it. Migrating to react-bootstrap alongside the Bootstrap 4 to 5 upgrade moves to a library with active maintenance.

React Router v6: React Router v5 with a custom history object is a pattern from 2019. v6 simplifies routing considerably and the custom history workaround is no longer needed.

Environment variables over auth_config.json: Environment variables are the standard configuration mechanism for modern deployment pipelines (Vercel, Netlify, Docker, CI/CD), so the sample now works out of the box with these platforms without any extra steps. Manually setting variables for local development still works with the .env.example to .env.local file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant